<template>
  <view>
    <view class="icon-box">
      <u-image
        class="logo"
        :src="`${getImageUrl('logo.png')}`"
        width="200rpx"
        height="200rpx"
        mode="aspectFit"
      ></u-image>
      <view class="box-title"> {{ appBaseInfo.appName }} V{{ appBaseInfo.appVersion }} </view>
    </view>
    <view class="list">
      <view
        class="item-view dis-flex flex-y-between flex-y-center"
        @click="routeTo('/universal/webcontent/webcontent?key=about_us')"
      >
        <text>平台说明</text>
        <u-image src="@/static/more.png" width="14rpx" height="28rpx"></u-image>
      </view>
      <view class="item-view">
        <view
          @click="routeTo('/universal/webcontent/webcontent?key=service_agreement')"
          class="dis-flex flex-y-between flex-y-center"
          style="padding-bottom: 30rpx"
        >
          <text>用户协议</text>
          <u-image src="@/static/more.png" width="14rpx" height="28rpx"></u-image>
        </view>
        <u-line></u-line>
        <view
          @click="routeTo('/universal/webcontent/webcontent?key=privacy_policy')"
          class="dis-flex flex-y-between flex-y-center"
          style="padding-top: 30rpx"
        >
          <text>隐私政策</text>
          <u-image src="@/static/more.png" width="14rpx" height="28rpx"></u-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appBaseInfo: {
        appName: '',
        appVersion: ''
      }
    }
  },
  onLoad() {
    this.appBaseInfo = uni.getAppBaseInfo()
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style>
.icon-box {
  background-color: #fff;
  height: 360rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  margin-top: 50rpx;
  box-shadow: 0rpx 3rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
  border-radius: 30rpx;
}

.list {
  padding: 20rpx 0;
}

.box-title {
  margin: 30rpx 0 10rpx 0;
  font-size: 30rpx;
  color: #333333;
}

.box-vsion {
  color: #999999;
  font-size: 30rpx;
}

.item-view {
  /* height: 100rpx; */
  background-color: #fff;
  overflow: auto;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  font-size: 30rpx;
}
</style>
